<template>
  <div class="containet">
    <div class="app-containet">
      <h4>车形管理</h4>
      <el-form class="bb" label-width="80px">
        <el-row type="flex" justify="space-between">
          <!-- <el-form-item label="车辆类型">
            <el-select placeholder="请选择车辆类型">
              <el-option label="区域一" value="shanghai" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="车牌号码">
            <el-input placeholder="请输入车牌号码" />
          </el-form-item>
          <div class="ee">
            <span>
              <el-button type="danger">搜索</el-button>
              <el-button>重置</el-button>
            </span>
          </div>
        </el-row>
      </el-form>
      <div class="box">
        <el-row type="flex">
          <el-col>
            <el-card shadow="always">
              <el-tabs type="border-card" :stretch="false">
                <el-tab-pane label="全部22" name="first" />
                <el-tab-pane label="可用11" name="second" />
                <el-tab-pane label="停用11" name="third" />
              </el-tabs>
              <div class="line" />
            </el-card>
          </el-col>
        </el-row>

      </div>
      <div class="base">
        <el-button type="danger" class="danger">新增车辆</el-button>
        <el-card class="box-card">
          <el-table
            :data="tableData.items"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              prop="date"
              label="序号"
            />
            <el-table-column
              prop="licensePlate"
              label="车辆牌号"
            />
            <el-table-column
              prop="truckTypeName"
              label="车辆类型"
            />
            <el-table-column
              prop="driverNum"
              label="司机数量"
            />
            <el-table-column prop="workStatus" label="车辆状态">
              <template v-slot="{row}">
                <span>{{ row.workStatus===0?'停用':'启用' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="deviceGpsId"
              label="GPS设备ID"
            />
            <el-table-column
              prop="allowableLoad"
              label="实载重量(T)"
            />
            <el-table-column
              prop="allowableVolume"
              label="实载体积（方）"
            />

            <el-table-column
              fixed="right"
              label="操作"
              width="300"
            >
              <template v-slot="{row}">
                <el-button type="text" size="small" @click="skip(row.id)">查看详情</el-button>
                <el-button type="text" size="small">状态</el-button>
                <el-button type="text" size="small">配置司机</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-pagination
          :current-page="pageParams.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(tableData.counts)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { Example } from '@/api/Example '
export default {
  name: 'Employee',
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      tableData: [],
      pageParams: {
        page: 1,
        pageSize: 10
      },
      total: 10,
      shanghai: ''
    }
  },
  // 进行数据渲染
  created() {
    this.pagingForm()
  },
  methods: {
    // 每页条数
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.pagingForm()
    },
    // 当前页数
    handleCurrentChange(currentPage) {
      this.pageParams.page = currentPage
      this.pagingForm()
    },
    // 获取页面数据渲染
    async pagingForm() {
      const res = await Example(this.pageParams)
      this.tableData = res.data.data
    },
    async skip(id) {
      this.$router.push(`/details/${id}`)
    }
  }
}
</script>
<style scoped>
.ee{
  margin-left: 10px;
}
.bb{
  margin-left: 10%;
  display: flex;
  align-items: center;
}
.box{
  margin: 10px;
}
.base{
  width: 1460px;
  margin: 10px;
}
.danger{
  margin: 10px;
}
</style>
